function render() {
    getArticleAPI(res => {
        if (res.status === 0) {
            $('tbody').empty()
            res.data.forEach(obj => {
                const theTr = `<tr>
                <td>${obj.name}</td>
                <td>${obj.alias}</td>
                <td>
                  <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
            
                  <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                </td>
              </tr>`
                $('tbody').append(theTr)
            })
        }
    })
}
render()

// 添加功能
$('.add').on('click', function () {
    let index = layer.open({
        type: 1,
        title: '添加类别',
        area: ['500px', '300px'],
        content: add_str, //这里content是一个普通的String
        success: function () {
            $('.add-form').on('submit', function (e) {
                e.preventDefault()
                const data = $(this).serialize()
                addCateAPI(data, res => {
                    layer.msg(res.message)
                    if (res.status === 0) {
                        layer.close(index)
                        render()
                    }
                })
            })
        }
    });
})

// 删除功能
$('tbody').on('click', '.delete', function () {
    const Id = $(this).attr('myid')
    delCateAPI(Id, res => {
        layer.msg(res.message)
        if (res.status === 0) {
            $(this).parents('tr').remove()
        }
    })
})

// 编辑功能
$('tbody').on('click', '.edit', function () {
    //  分类的名字
    const name = $(this).attr('data-name')
    // 分类的别名
    const alias = $(this).attr('data-alias')
    // 分类的Id
    const Id = $(this).attr('myid')
    let index = layer.open({
        type: 1,
        title: '编辑类别',
        content: ['500px', '300px'],
        content: edit_str, // 这里content是一个普通的string
        success: function () {
            layui.form.val('edit', {
                name,
                alias,
                Id
            })
            $('form').on('submit', function (e) {
                e.preventDefault()
                const data = $('#edit_form').serialize()
                updateCateAPI(data, res => {
                    layer.msg(res.message)
                    if (res.status === 0) {
                        layer.close(index)
                        render()
                    }
                })
            })
        }
    });
})



// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;


// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;